<template>
  <form-item>
    <el-tabs v-model="activeName">
      <el-tab-pane label="配置项" name="first">
        <el-form-item label="字段名">
          <template v-if="!options['is-range']">
            <el-input v-model="field" placeholder="请输入字段名(field)" />
          </template>
          <template v-else>
            <el-input
              v-model="fieldStart"
              placeholder="请输入开始时间字段(v-model)"
              style="margin-bottom: 10px"
            />
            <el-input
              v-model="fieldEnd"
              placeholder="请输入结束时间字段(v-model)"
            />
          </template>
        </el-form-item>
        <el-form-item label="默认值">
          <template v-if="options['is-range']">
            <el-input
              v-model="vModel[0]"
              placeholder="开始时间"
              style="margin-bottom: 10px"
            />
            <el-input v-model="vModel[1]" placeholder="结束时间" />
          </template>
          <span v-else>
            <el-input v-model="vModel" placeholder="请输入默认事件"
          /></span>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="属性" name="second">
        <el-form-item label="占位符">
          <el-input
            v-model="options.placeholder"
            placeholder="请输入占位符"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间段">
          <el-input
            v-model="options.selectableRange"
            placeholder="请输入时间段"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间格式（展示）">
          <el-input
            v-model="options.format"
            placeholder="请输入时间格式（展示）"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间格式（传值）">
          <el-input
            v-model="options['value-format']"
            placeholder="请输入时间格式（传值）"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否为区间显示">
          <el-switch v-model="options['is-range']" @change="changeRange">
          </el-switch>
        </el-form-item>
        <el-form-item label="是否禁用">
          <el-switch v-model="options.disabled"> </el-switch>
        </el-form-item>
        <el-form-item label="是否只读">
          <el-switch v-model="options.readonly"> </el-switch>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </form-item>
</template>

<script>
import common from '../mixin';
export default {
  name: 'TimePickerTool',
  mixins: [common],
  computed: {
    fieldStart: {
      get() {
        return this.component['__fieldStart__'];
      },
      set(val) {
        this.setComponent({
          ...this.component,
          __fieldStart__: val
        });
      }
    },
    fieldEnd: {
      get() {
        return this.component['__fieldEnd__'];
      },
      set(val) {
        this.setComponent({
          ...this.component,
          __fieldEnd__: val
        });
      }
    }
  },
  methods: {
    changeRange(val) {
      if (val) {
        this.setComponent({
          ...this.component,
          __vModel__: []
        });
      } else {
        this.setComponent({
          ...this.component,
          __vModel__: ''
        });
      }
    }
  }
};
</script>